﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/项目.css">
  <title>项目</title>
</head>

<body>
  <div class="box">
    <div class="lun">
      <ul>

      </ul>
    </div>
  </div>
</body>
<script src="../../js/jquery.js"></script>
<script>
  $.ajax({
    url: "json/lunbo.json",
    success: function (a) {
      var str = a.img;
      var str1 = a.p;
      var arr = ``;
      for (var i = 0; i < str.length; i++) {
        arr += `
           <li><img src="${str[i]}" alt=""></li>
        `;
      };
      $('ul').append(arr);
    }
  });
  var set = setInterval(mei, 3000);

  var i = 0;
  var index = 0;
  // $('img').eq(0).css("opacity", '.9')

  function mei() {
    mov();
  }

  function mov() {
    $('ul').width(($('ul li').eq(1).width() + 20) * $('ul li').length)
    index++;
    if (index >= 1) {
      index = 0;
      var one = $('ul li').eq(3)
      $('ul li').eq(3).remove()
      $('ul').prepend(one);
    };
    $('ul').animate({
      'marginLeft': index * ($('ul li').eq(0).width() + 20) + "px"
    });
    // $('img').eq(0).css("opacity", '.8')
    $('img').eq(0).animate({
      "opacity": '.9'
    }, 'slow').parent().siblings().find('img').animate({
      "opacity": '.5'
    }, 'fast')
  }

</script>

</html>
